const form = layui.form
const layer = layui.layer
// 获取文章类别的下拉框数据
axios.get("/my/article/cates").then(({ data: { data } }) => {
  const newArr = data.map(({ Id, name }) => {
    return `<option value="${Id}">${name}</option>`
  }).join('')
  $('[name=cate_id]').append(newArr)
  //手动渲染
  form.render()
})

// 获取文章类别的下拉框数据2
// axios.get("/my/article/cates").then(({ data: { data } }) => {
//   const newArr = data.map(({ Id, name }) => {
//     return `<option value='${Id}'>${name}</option>`
//   }).join('')
//   $("[name=cate_id]").append(newArr)
//   form.render('select'); //刷新select选择框渲染
// })

//初始化富文本编辑器
const E = window.wangEditor
const editor = new E("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 1;
editor.create()

//实现基本裁剪效果
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");
// 2. 裁剪选项
let options = {
  aspectRatio: 400 / 280,
  preview: '.preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)

// 点击·选择封面·弹出框，用户选择文件
$("#btnChooseCoverImage").on('click', function () {
  $("#fileCover").click()
})

// 给文件域注册change事件，更换裁剪区域的图片
$("#fileCover").on("change", function () {
  // 获取用户选择的文件
  const file = this.files[0]
  if (!file) {
    return layer.msg('请选择图片')
  }
  // 将文件对象转成地址
  const newImgURL = URL.createObjectURL(file)
  // 先销毁裁剪区域，再设置图片的src，再重新渲染
  $image
    .cropper('destroy')      // 销毁旧的裁剪区域
    .attr('src', newImgURL)  // 重新设置图片路径
    .cropper(options)        // 重新初始化裁剪区域
})

// 决定文章的状态是已发布，还是草稿
let state;
$("#btnPublish").on("click", function () {
  state = '已发布'
})
$("#btnSave").on("click", function () {
  state = '草稿'
})

// 获取表单数据，ajax提交数据
$('#form').on('submit', function (e) {
  e.preventDefault()
  // 收集数据 ==> 接口要求的是 FormData格式数据
  const fd = new FormData(this)
  // 对于FormData收集不到的数据，可以使用append方法进行追加
  console.log(editor.txt.html());
  fd.append('content', editor.txt.html())
  // 追加文章状态
  fd.append('state', state)
  $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob(function (blob) {
      console.log('收集到了', blob);
      // 将 Canvas 画布上的内容，转化为文件对象
      // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

      // 使用fd的append方法来追加blob数据
      fd.append('cover_img', blob)

      // 在这发送ajax请求 ==> 才把数据完整的收集到了
      axios.post('/my/article/add', fd).then((res) => {
        if (res.data.status !== 0) {
          return layer.msg('发布失败')
        }
        layer.msg('发布成功',
          {
            time: 1500
          },
          function () {
            location.href = '/article/art_list.html'
          }
        )
      })

      //不是必写的代码 ==> 做个检测
      fd.forEach((value, name) => console.log(value, name))
    })
})

// 获取表单数据，ajax提交数据2
// $('#form').on('submit', function (e) {
//   e.preventDefault()
//   const fd = new FormData(this)
//   console.log(editor.txt.html());
//   fd.append('content', editor.txt.html())
//   $image
//     .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
//       width: 400,
//       height: 280
//     })
//   //不是必写的代码 ==> 做个检测
//   fd.forEach((value, name) => console.log(value, name))
// })





